<template>
  <section class="contentCon">
      <transition>
          <section>
            <div><el-button v-show="properties.length>0" type="primary" style="position:relative;float:left;z-index:20" @click="goSeeAnalysis">深度数据查看</el-button><el-button type="primary" style="position:relative;float:left;z-index:20" @click="gotoseedata">原始数据查看</el-button>
            <el-carousel height="200px" direction="vertical" :autoplay="true" style="width:700px;height: 50px;float: left;margin-left:20px;" :interval="3000">
            <el-carousel-item v-for="item in alarmItems">
              <h3 class="medium"><div class="happen-img"><img v-if="item.type==2" src="@/assets/smoke_fault.png"></img><img v-else-if="item.type==3" src="@/assets/smoke_alert.gif"></img><img v-else-if="item.type==1" src="@/assets/smoke_normal.png"></img></div><p class="happen-status" v-if="item.title=='设备无登录异常'">无多次登录异常</p><p v-else class="happen-status"  v-bind:class="{'alert':item.type==3,'fault':item.type==2}">请注意！发生{{item.title}}  {{utils.timestampToTime(item.timestamp)}}</p></h3>
              <el-button type="primary" plain style="margin-left:20px;" v-if="item.title=='设备多次登录异常'||item.title=='设备无登录异常'" @click="gotoSeeLoginLog">查看登录日志</el-button>
            </el-carousel-item>
          </el-carousel>
              <el-button type="danger" style="position:relative;float:right;z-index:20" @click="deleteDevice">注销设备</el-button>
            </div>
            <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark"><p v-if="this.platform==='onenet'" class="product_Id">中移OneNet平台设备</p><p v-else-if="this.platform==='aep'" class="product_Id">电信AEP平台设备</p><span style="line-height: 36px;">{{device_name}}</span><p v-if="this.netStatus==1" class="online-status">在线</p><p v-else class="online-status">离线</p></div></el-col>
            </el-row>
            <el-row>
              <div class="left">
              <div class="cardWrap_3kz2Pfee82_left">
              <div class="content_2CgxXfee82 active_gm8Z5fee82" style="height:176px">
                <div>
                  <p style="margin-bottom: 31px;font-size: 17px;" class="txt_raRWufee82" v-bind:class="{'alert':this.smoke_state==2,'fault':this.smoke_state==1}">设备状态</p>
                  <div class="txt-value_2a4nTfee82" v-bind:class="{'alert':this.smoke_state==2,'fault':this.smoke_state==1}">
                    <span style="font-size: 27px;" class="num_2ceN2fee82">{{smoke_show}}</span>
                    </div>
                  </div>
                  <div class="iconWrap_3mA74fee82" v-bind:class="{'alert':this.smoke_state==2,'fault':this.smoke_state==1}" style="width: 60px;height: 60px;">
                    <img v-if="this.smoke_state==2" src="@/assets/smoke_alert.gif" style="width: 35px;height: 35px;margin-top: 7px;">
                    <img v-else-if="this.smoke_state==1" src="@/assets/smoke_fault.png" style="width: 35px;height: 35px;margin-top: 7px;">
                    <img v-else src="@/assets/smoke_normal.png" style="width: 35px;height: 35px;margin-top: 7px;">
                    </div>
                </div>
              </div>
              </div>  

            <div class="right">
            <div class="cardWrap_3kz2Pfee82">
              <div class="content_2CgxXfee82 active_gm8Z5fee82">
                <div>
                  <p class="txt_raRWufee82">烟雾浓度</p>
                  <div class="txt-value_2a4nTfee82"><span class="num_2ceN2fee82">{{smoke_value}}</span></div>
                  <div class="report-time"><span>最近上报时间:{{smoke_value_time}}</span></div>
                  </div>
                  <div class="iconWrap_3mA74fee82" style="background-color:rgba(5,130,255,0.1)">
                    <i class="el-icon-c-scale-to-original" style="color:#0582FF"></i>
                  </div>
              </div>
            </div>

            <div class="cardWrap_3kz2Pfee82">
              <div class="content_2CgxXfee82 active_gm8Z5fee82">
                <div>
                  <p class="txt_raRWufee82">电池电量</p>
                  <div class="txt-value_2a4nTfee82"><span class="num_2ceN2fee82">{{battery_value}}</span></div>
                  <div class="report-time"><span>最近上报时间:{{battery_value_time}}</span></div>
                  </div>
                  <div class="iconWrap_3mA74fee82">
                    <i class="el-icon-headset" style="color:#0582FF"></i>
                  </div>
              </div>
            </div>
            <div class="cardWrap_3kz2Pfee82" @click="openHeartTime" style="cursor:pointer;">
              <div class="content_2CgxXfee82 active_gm8Z5fee82">
                <div>
                  <p class="txt_raRWufee82">心跳间隔时间</p>
                  <div class="txt-value_2a4nTfee82"><span class="num_2ceN2fee82">{{heart_time_day}}</span><span class="num_2ceN2fee82 unit">天</span><span class="num_2ceN2fee82">{{heart_time_hour}}</span><span class="num_2ceN2fee82 unit">小时</span><span class="num_2ceN2fee82">{{heart_time_min}}</span><span class="num_2ceN2fee82 unit">分</span></div>
                  <div style="font-size: 12px;"><span>点击修改 >></span></div>
                  </div>
                  <div class="iconWrap_3mA74fee82">
                    <i class="el-icon-magic-stick" style="color:#0582FF"></i>
                  </div>
              </div>
            </div>
            <div class="cardWrap_3kz2Pfee82">
              <div class="content_2CgxXfee82 active_gm8Z5fee82">
                <div>
                  <p class="txt_raRWufee82">软件版本号</p>
                  <div class="txt-value"><span class="num_2ceN2fee82">{{software_version}}</span></div>
                  </div>
                  <div class="iconWrap_3mA74fee82">
                    <i class="el-icon-date" style="color:#0582FF"></i>
                  </div>
              </div>
            </div>
            <div class="cardWrap_3kz2Pfee82">
              <div class="content_2CgxXfee82 active_gm8Z5fee82">
                <div style="width: 81%;">
                  <p class="txt_raRWufee82">硬件版本号</p>
                  <div class="txt-value"><span class="num_2ceN2fee82">{{hardware_version}}</span></div>
                  </div>
                  <div class="iconWrap_3mA74fee82">
                    <i class="el-icon-tickets" style="color:#0582FF"></i>
                  </div>
              </div>
            </div>
              <div class="cardWrap_3kz2Pfee82" @click="openHeartDetail" style="cursor:pointer;">
              <div class="content_2CgxXfee82 active_gm8Z5fee82">
                <div>
                  <p class="txt_raRWufee82">心跳包成功率</p>
                  <div class="txt-value_2a4nTfee82"><span class="num_2ceN2fee82">{{heartlv}}%</span></div>
                  <div style="font-size: 12px;"><span>点击查看详情(近30天) >></span></div>
                  </div>
                  <div class="iconWrap_3mA74fee82">
                    <i class="el-icon-location-outline" style="color:#0582FF"></i>
                  </div>
              </div>
             </div>
            </div>
            </el-row>

            <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark"><span style="line-height: 36px;">近30天数据</span></div></el-col>
            </el-row>
            <div style="position:relative;">
                <icon-hinder v-show="isIconVisible"></icon-hinder>
                <div id="container_state" class="culri all"></div>
            </div>
            <div id="container_val" class="culri" style="margin-top:20px;"></div>
            <div id="container_vol" class="culri" style="margin-top:20px;"></div>
            <!-- <div id="container_vol_val" class="culri" style="margin-top:20px"></div> -->
          </section>
      </transition>
    <el-dialog title="设置心跳包间隔时间"
        :visible.sync="dialogVisibleHeartTime"
        width="50%" :close-on-click-modal="false">
          <p class="heart_hint">设置心跳包间隔:(<span style="font-size:23px;">天</span>)</p><el-input-number v-model="heart_time_day_set"    :min="0" :max="1000" label="描述文字"></el-input-number>
          <p class="heart_hint">设置心跳包间隔:(<span style="font-size:23px;">小时</span>)</p><el-input-number v-model="heart_time_hour_set"  :min="0" :max="23" label="描述文字"></el-input-number>
          <p class="heart_hint">设置心跳包间隔:(<span style="font-size:23px;">分钟</span>)</p><el-input-number v-model="heart_time_min_set"  :min="0" :max="59" label="描述文字"></el-input-number>
        <span slot="footer" class="dialog-footer">
                  <el-button style="margin-top: 12px;" type="primary" @click="modifyHeartTime">确定</el-button>
        </span>
      </el-dialog>
    <el-dialog :title="device_name"
        :visible.sync="dialogVisible"
        width="50%" :close-on-click-modal="false">
        <div id="container_login" style="height:400px"></div>
        <span slot="footer" class="dialog-footer">
          <el-popconfirm
            title="确定已处理该设备异常,并且设备已经上线了吗？" @confirm="dultWithAccess"
          >
            <el-button v-show="isMultLogin==1" slot="reference">标记为已处理</el-button>
          </el-popconfirm>
        </span>
      </el-dialog>
    <el-dialog 
        :visible.sync="dialogVisibleAnylysis"
        width="85%"
        :before-close="handleClose" :close-on-click-modal="false">
        <el-steps :active="step" finish-status="success">
          <el-step title="请勾选查看项"></el-step>
          <el-step title="请选择起止时间"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
        <div style="padding:20px" v-show="step==0">
          <el-checkbox class="step1-item" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedProperties" @change="handleCheckedPropertiesChange">
            <el-checkbox class="step1-item" v-for="property in properties" :label="property" :key="property">{{property}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div style="padding:20px" v-show="step==1">
            <div class="block">
            <span class="demonstration">请选择起止时间</span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </div>
        <div id="step3" v-show="step>1" style="height:400px;overflow:scroll;padding:20px;" v-loading="deepLoading" element-loading-text="拼命加载中">
              <div class="item-chart" v-show="checkedProperties.indexOf('设备状态')!=-1" id="container-smoke-state"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('心跳包日志')!=-1" id="container-heartbeat"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('烟雾浓度')!=-1" id="container-smoke-value"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('电池电量')!=-1" id="container-battery-value"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('电池电压')!=-1" id="container-battery-voltage"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('信噪比(snr)')!=-1" id="container-snr"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('参考信号接收功率(rsrp)')!=-1" id="container-rsrp"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('无线信号覆盖等级(ecl)')!=-1" id="container-ecl"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('信号强度(signalPower)')!=-1" id="container-signalPower"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('终端发射功率(tx_Power)')!=-1" id="container-tx_Power"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('信号与干扰加噪声比(sinr)')!=-1" id="container-sinr"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('温度(temp)')!=-1" id="container-temp"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('CSQ')!=-1" id="container-csq"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('PCI')!=-1" id="container-pci"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('RSRQ')!=-1" id="container-rsrq"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('频点(EARFCN)')!=-1" id="container-earfcn"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('TAC')!=-1" id="container-tac"></div>
        </div>
        <span slot="footer" class="dialog-footer">
                  <el-button style="margin-top: 12px;" @click="nextAnalysis">{{nextText}}</el-button>
        </span>
      </el-dialog>
      <heart-detail ref="heartDetailDialog"
      :visible.sync="heartDetailVisible"
    />
  </section>
</template>
<script type="text/ecmascript-6">
import debounce from 'lodash.debounce';
import { deviceDetailService,deviceService } from '@/services';
import iconHinder from '@/views/device/iconHinder.vue';
import echarts from 'echarts';
import utils from '@/utils';
import heartDetail from './heartDetail';
const ONENET_PRODUCT_KEY = '5002786';
const PROFILE_PRODUCT_KEY = '10092853';
const propertyOptions = ['设备状态', '心跳包日志', '烟雾浓度', '电池电量', '电池电压', '信噪比(snr)', '参考信号接收功率(rsrp)', '无线信号覆盖等级(ecl)', '信号强度(signalPower)', '终端发射功率(tx_Power)', '信号与干扰加噪声比(sinr)'];
const oneNetPropertyOptions = ['设备状态', '心跳包日志', '烟雾浓度', '电池电量', '信噪比(snr)', '参考信号接收功率(rsrp)', '无线信号覆盖等级(ecl)', '温度(temp)', 'CSQ', 'PCI', 'RSRQ', '频点(EARFCN)', 'TAC'];
const profilePropertyOptions = ['设备状态', '心跳包日志', '烟雾浓度', '电池电量', '信噪比(snr)', '参考信号接收功率(rsrp)', '温度(temp)', 'CSQ'];
export default {

  data () {
    var date = new Date();
    var lastDate = new Date(date - 1000 * 60 * 60 * 24 * 30);
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [lastDate, date],
      menuList: [],
      alarmItems: [],
      device_name: null,
      netStatus: null,
      smoke_state: null,
      smoke_show: null,
      smoke_value: null,
      smoke_value_time: null,
      battery_value: null,
      battery_value_time: null,
      heartlv: null,
      software_version: null,
      hardware_version: null,
      smoke_state_maparea_list: null,
      smoke_state_list: null,
      smoke_value_list: null,
      battery_value_list: null,
      battery_voltage_list: null,
      login_error_list: null,
      login_error_marks: [],
      dialogVisible: false,
      dialogVisibleAnylysis: false,
      dialogVisibleHeartTime: false,
      checkAll: false,
      checkedProperties: [],
      properties: [],
      isIndeterminate: false,
      step: 0,
      deepFaultList: null,
      deepAlarmList: null,
      deepDismantleList: null,
      deepLowVoltageList: null,
      deepHeartBeatList: null,
      deepSmokeValueStatic: null,
      deepBatteryValueStatic: null,
      deepBatteryVoltageStatic: null,
      deepSnrStatic: null,
      deepRsrpStatic: null,
      deepEclStatic: null,
      deepSignalPowerStatic: null,
      deepTxPowerStatic: null,
      deepSinrStatic: null,
      deepTempStatic: null,
      deepCSQStatic: null,
      deepPCIStatic: null,
      deepRSRQStatic: null,
      deepEARFCNStatic: null,
      deepTACStatic: null,
      nextText: "下一步",
      deepLoading: false,
      isIconVisible: false,
      heart_time_day: 0,
      heart_time_hour: 20,
      heart_time_min: 0,
      heart_time_day_set: 0,
      heart_time_hour_set: 20,
      heart_time_min_set: 0,
      isMultLogin: 0,
      platform: null,
      heartDetailVisible: false,
      heartDetailDeviceId: null,
    };
  },
  created () {
    this.queryDeviceStatus();
    this.queryDeviceStatusHistory();
  },
  mounted () {
    var dom = document.getElementById("container_state");
    var myChart = echarts.init(dom);
    myChart.on('click', (params) => {
      this.gotoseedata();
    });
  },
  components: {
    'icon-hinder': iconHinder,
    'heart-detail': heartDetail,
  },
  watch:{
      heartDetailVisible(val, oldVal){//普通的watch监听
          if(val==true){
            this.$refs.heartDetailDialog.getHeartAnalysis(this.$route.query.deviceId);
          }
      },
  },
  methods: {
    queryDeviceStatus: debounce(async function() {
      const { device_name, netStatus, heart_time_day, heart_time_hour, heart_time_min, deviceStatusList,platform, productKey } = await deviceDetailService.queryDeviceStatus(this.$route.query.deviceId);
        this.device_name = device_name;
        this.netStatus = netStatus;
        this.heart_time_day = heart_time_day;
        this.heart_time_hour = heart_time_hour;
        this.heart_time_min = heart_time_min;
        this.platform = platform;
        if(productKey === ONENET_PRODUCT_KEY){
          this.properties = oneNetPropertyOptions;
        } else if(productKey === PROFILE_PRODUCT_KEY){
          this.properties = profilePropertyOptions;
        }
        else{
          this.properties = propertyOptions;
        }
        var arr = deviceStatusList;
        var smokeState, sensorFault, dismantle, lowVoltage, onenetstatus;
        var ob = {};
        arr.forEach(element => {
          if (element.datasetId === 'onenetstatus' || element.datasetId === 'profilestatus') {
            onenetstatus = element.value;
            if (element.value !== 7) {
              ob = {};
              ob.timestamp = element.timestamp;
              switch (element.value) {
                case 1:
                  ob.type = 3;
                  ob.title = "火灾报警";
                  break;
                case 2:
                  ob.type = 3;
                  ob.title = "静音";
                  break;
                case 3:
                  ob.type = 2;
                  ob.title = "蜂鸣器故障";
                  break;
                case 4:
                  ob.type = 2;
                  ob.title = "低压";
                  break;
                case 5:
                  ob.type = 2;
                  ob.title = "故障";
                  break;
                case 6:
                  ob.type = 2;
                  ob.title = "数据异常";
                  break;
                case 8:
                  ob.type = 2;
                  ob.title = "单次静音";
                  break;
                case 9:
                  ob.type = 2;
                  ob.title = "连续静音";
                  break;
                case 10:
                  ob.type = 2;
                  ob.title = "拆除";
                  break;
                case 11:
                  ob.type = 2;
                  ob.title = "拆除恢复";
                  break;
                case 14:
                  ob.type = 3;
                  ob.title = "正常电压下模拟报警";
                  break;
                case 15:
                  ob.type = 3;
                  ob.title = "低电压下模拟报警";
                  break;
              }
              this.alarmItems.push(ob);
            }
          } else if (element.datasetId === 'smoke_state') {
            smokeState = element.value;
            if (element.value === 1) {
              ob = {};
              ob.type = 3;
              ob.title = "火灾报警";
              ob.timestamp = element.timestamp;
              this.alarmItems.push(ob);
            }
          } else if (element.datasetId === 'smoke_value') {
            if (utils.isEmpty(element.timestamp) || element.timestamp === 0) {
              this.smoke_value = "- -";
              this.smoke_value_time = "- -";
            } else {
              this.smoke_value = element.value + "%";
              this.smoke_value_time = utils.timestampToTime(element.timestamp);
            }
          } else if (element.datasetId === 'battery_value') {
            if (utils.isEmpty(element.timestamp) || element.timestamp === 0) {
              this.battery_value = "- -";
              this.battery_value_time = "- -";
            } else {
              this.battery_value = element.value + "%";
              this.battery_value_time = utils.timestampToTime(element.timestamp);
            }
          } else if (element.datasetId === 'software_version') {
            if (!utils.isEmpty(element.value)) {
              this.software_version = element.value;
            } else {
              this.software_version = "- -";
            }
          } else if (element.datasetId === 'hardware_version') {
            if (!utils.isEmpty(element.value)) {
              this.hardware_version = element.value;
            } else {
              this.hardware_version = "- -";
            }
          } else if (element.datasetId === 'sensor_fault') {
            sensorFault = element.value;
            if (element.value === 1) {
              ob = {};
              ob.type = 2;
              ob.title = "传感器故障";
              ob.timestamp = element.timestamp;
              this.alarmItems.push(ob);
            }
          } else if (element.datasetId === 'dismantle') {
            dismantle = element.value;
            if (element.value === 1) {
              ob = {};
              ob.type = 2;
              ob.title = "拆除";
              ob.timestamp = element.timestamp;
              this.alarmItems.push(ob);
            }
          } else if (element.datasetId === 'low_voltage') {
            lowVoltage = element.value;
            if (element.value === 1) {
              ob = {};
              ob.type = 2;
              ob.title = "低电压";
              ob.timestamp = element.timestamp;
              this.alarmItems.push(ob);
            }
          } else if (element.datasetId === 'multlogin') {
            if (element.value === 1) {
              ob = {};
              ob.type = 2;
              ob.title = "设备多次登录异常";
              ob.timestamp = element.timestamp;
              this.alarmItems.push(ob);
              this.isMultLogin = 1;
            } else {
              ob = {};
              ob.type = 1;
              ob.title = "设备无登录异常";
              ob.timestamp = element.timestamp;
              this.alarmItems.push(ob);
              this.isMultLogin = 0;
            }
          } else if (element.datasetId === 'heartbeat') {
            this.heartlv = element.value;
          }
        });
        this.smoke_state = this.getStatus(smokeState, sensorFault, dismantle, lowVoltage, onenetstatus);
        this.smoke_show = this.ShowStatus(smokeState, sensorFault, dismantle, lowVoltage, onenetstatus);
    }, 500),
    queryDeviceStatusHistory: debounce(async function() {
      const { productKey, smoke_state, smoke_state_mark, smoke_value, battery_value } = await deviceDetailService.queryDeviceStatusHistory(this.$route.query.deviceId);
       
        this.smoke_state_list = smoke_state;
        this.smoke_state_maparea_list = smoke_state_mark;
        this.smoke_value_list = smoke_value;
        this.battery_value_list = battery_value;
        if (productKey===ONENET_PRODUCT_KEY || productKey === PROFILE_PRODUCT_KEY) {
          this.getOneNetAlarmStateInit();
        } else{
          this.isIconVisible = true;
          this.getAlarmStateInit();
        }
        this.getAlarmValueInit();
        this.getVolInit();
    }, 1000),
    queryDeviceLoginErrorHistory: debounce(async function() {
      const { error_state } = await deviceDetailService.queryDeviceLoginErrorHistory(this.$route.query.deviceId);
      this.login_error_list = error_state;
      this.login_error_marks = [];
      this.login_error_list.forEach(element => {
        var a = element[1];
        if (a === 2) {
          var obj = {};
          obj.name = "登录异常";
          obj.value = "已处理";
          obj.xAxis = element[0];
          obj.yAxis = 2;
          this.login_error_marks.push(obj);
        }
      });
      this.getLoginData();
    }, 100),
    queryDeviceAnalysis: debounce(async function() {
      const { device_state, heartbeat, smoke_value, battery_value, battery_voltage, snr, rsrp, ecl, signal_power, tx_power, sinr, temperature, csq, pci, rsrq, earfcn, tac } = await deviceDetailService.queryDeviceDeepHistory(this.$route.query.deviceId, this.value1[0].getTime(), this.value1[1].getTime());
      this.step = 3;
      this.deepLoading = false;
      this.deepFaultList = device_state.fault_state;
      this.deepAlarmList = device_state.smoke_state;
      this.deepDismantleList = device_state.dismantle_state;
      this.deepLowVoltageList = device_state.lowbattery_state;
      this.deepHeartBeatList = heartbeat;
      this.deepSmokeValueStatic = smoke_value;
      this.deepBatteryValueStatic = battery_value;
      this.deepBatteryVoltageStatic = battery_voltage;
      this.deepSnrStatic = snr;
      this.deepRsrpStatic = rsrp;
      this.deepEclStatic = ecl;
      this.deepSignalPowerStatic = signal_power;
      this.deepTxPowerStatic = tx_power;
      this.deepSinrStatic = sinr;
      this.deepTempStatic = temperature;
      this.deepCSQStatic = csq;
      this.deepPCIStatic = pci;
      this.deepRSRQStatic = rsrq;
      this.deepEARFCNStatic = earfcn;
      this.deepTACStatic = tac;
      if (this.checkedProperties.indexOf('设备状态') !== -1) {
        this.goSeeAnalysisDeviceState();
      }
      if (this.checkedProperties.indexOf('心跳包日志') !== -1) {
        this.goSeeAnalysisHeartBeatState();
      }
      if (this.checkedProperties.indexOf('烟雾浓度') !== -1) {
        this.goSeeAnalysisSmokeValueState();
      }
      if (this.checkedProperties.indexOf('电池电量') !== -1) {
        this.goSeeAnalysisBatteryValueState();
      }
      if (this.checkedProperties.indexOf('信噪比(snr)') !== -1) {
        this.goSeeAnalysisSnrState();
      }
      if (this.checkedProperties.indexOf('参考信号接收功率(rsrp)') !== -1) {
        this.goSeeAnalysisRsrpState();
      }
      if (this.checkedProperties.indexOf('无线信号覆盖等级(ecl)') !== -1) {
        this.goSeeAnalysisEclState();
      }
      if (this.checkedProperties.indexOf('电池电压') !== -1) {
        this.goSeeAnalysisBatteryVoltageState();
      }
      if (this.checkedProperties.indexOf('信号强度(signalPower)') !== -1) {
        this.goSeeAnalysisSignalPowerState();
      }
      if (this.checkedProperties.indexOf('终端发射功率(tx_Power)') !== -1) {
        this.goSeeAnalysisTxPowerState();
      }
      if (this.checkedProperties.indexOf('信号与干扰加噪声比(sinr)') !== -1) {
        this.goSeeAnalysisSinrState();
      }
      if (this.checkedProperties.indexOf('温度(temp)') !== -1) {
        this.goSeeAnalysisTempState();
      }
      if (this.checkedProperties.indexOf('CSQ') !== -1) {
        this.goSeeAnalysisCsqState();
      }
      if (this.checkedProperties.indexOf('PCI') !== -1) {
        this.goSeeAnalysisPciState();
      }
      if (this.checkedProperties.indexOf('RSRQ') !== -1) {
        this.goSeeAnalysisRsrqState();
      }
      if (this.checkedProperties.indexOf('频点(EARFCN)') !== -1) {
        this.goSeeAnalysisEarfcnState();
      }
      if (this.checkedProperties.indexOf('TAC') !== -1) {
        this.goSeeAnalysisTacState();
      }
      this.deepLoading = false;
    }, 3000),
    modifyHeartTime: debounce(async function() {
      try {
        if (this.heart_time_min_set === 0 && this.heart_time_hour_set === 0 && this.heart_time_day_set === 0) {
          this.$message.error('心跳间隔不能为0');
          return;
        }
        var de = this.heart_time_day_set * 1440 + this.heart_time_hour_set * 60 + this.heart_time_min_set;
        console.log("设置的分钟数为:" + de);
        await deviceDetailService.modifyHeartTime(this.$route.query.deviceId, de);
        this.$message.success('设置成功');
        this.dialogVisibleHeartTime = false;
        this.queryDeviceStatus();
      } catch (error) {
        console.log(error);
      }
    }, 100),
    // 状态权重显示
    getStatus (smokeState, sensorFault, dismantle, lowVoltage, onenetstatus) {
      if (utils.isEmpty(onenetstatus)) {
        if (smokeState === 1) {
          if (sensorFault === 1) {
            return 1;
          } else {
            return 2;
          }
        } else {
          if (sensorFault === 1 || dismantle === 1 || lowVoltage === 1) {
            return 1;
          } else {
            return 0;
          }
        }
      } else {
         if (onenetstatus === 1 || onenetstatus === 2 || onenetstatus === 14 || onenetstatus === 15) {
          return 2;
        } else if(onenetstatus === 4 || onenetstatus === 5 || onenetstatus === 6 || onenetstatus === 10 || onenetstatus === 11){
          return 1;
        } else {
          return 0;
        }
      }
    },
    ShowStatus (smokeState, sensorFault, dismantle, lowVoltage, onenetstatus) {
      if (utils.isEmpty(onenetstatus)) {
        var d1 = "";
        if (smokeState === 1) {
          if (sensorFault === 1) {
            d1 = "传感器故障";
          } else {
            d1 = "火灾报警";
          }
        } else {
          if (sensorFault === 1) {
            d1 = "传感器故障";
          }
        }
        var d2 = "";
        if (dismantle === 1) {
          d2 = "拆除";
        }
        var d3 = "";
        if (lowVoltage === 1) {
          d3 = "低电压";
        }

        if (utils.isEmpty(d1) && utils.isEmpty(d2) && utils.isEmpty(d3)) {
          return "正常";
        } else {
          var da = "";
          if (!utils.isEmpty(d1)) {
            da = da + d1 + "、";
          }
          if (!utils.isEmpty(d2)) {
            da = da + d2 + "、";
          }
          if (!utils.isEmpty(d3)) {
            da = da + d3 + "、";
          }
          da = da.substring(0, da.length - 1);
          return da;
        }
      } else {
        switch (onenetstatus) {
          case 1:
            return "报警";
          case 2:
            return "静音";
          case 3:
            return "蜂鸣器故障";
          case 4:
            return "低压";
          case 5:
            return "故障";
          case 6:
            return "数据异常";
          case 7:
            return "正常";
          case 8:
            return "单次静音";
          case 9:
            return "连续静音";
          case 10:
            return "拆除";
          case 11:
            return "拆除恢复";
          case 14:
            return "正常电压下模拟报警";
          case 15:
            return "低电压下模拟报警";
          default:
            return "未知";
        }
      }
    },
    getAlarmStateInit() {
      var dom = document.getElementById("container_state");
      var myChart = echarts.init(dom);
      var option;

      option = {
        title: {
          text: '设备状态变化',
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            var dsa = "";
            if (params[0].data[1] === 4) {
              dsa = "故障";
            } else if (params[0].data[1] === 3) {
              dsa = "火灾";
            } else if (params[0].data[1] === 2) {
              dsa = "拆除";
            } else if (params[0].data[1] === 1) {
              dsa = "低电压";
            } else {
              dsa = "正常";
            }
            return utils.timestampToTime(params[0].axisValue) + "<br>设备状态:" + dsa + "<br>点击查看原始数据";
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time',
        },
        yAxis: {
          min: 0,
          max: 4,
          minInterval: 1,
          axisLabel: {
            formatter: function(val) {
              if (val === 4) {
                return "";
              } else if (val === 3) {
                return "";
              } else if (val === 2) {
                return "";
              } else if (val === 1) {
                return "";
              } else {
                return "";
              }
            }
          }
        },
        series: [
          {
            name: '设备状态',
            type: 'line',
            smooth: true,
            data: this.smoke_state_list,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "rgba(255, 173, 177, 0.0)"
                }
              }
            },
            markArea: {
              data: this.smoke_state_maparea_list
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    getOneNetAlarmStateInit() {
      var dom = document.getElementById("container_state");
      var myChart = echarts.init(dom);
      var option;

      option = {
        title: {
          text: '设备状态变化',
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            var dsa = "";
            if (params[0].data[1] === 1) {
              dsa = "报警";
            } else if (params[0].data[1] === 2) {
              dsa = "静音";
            } else if (params[0].data[1] === 3) {
              dsa = "蜂鸣器故障";
            } else if (params[0].data[1] === 4) {
              dsa = "低压";
            } else if (params[0].data[1] === 5) {
              dsa = "故障";
            } else if (params[0].data[1] === 6) {
              dsa = "数据异常";
            } else if (params[0].data[1] === 7) {
              dsa = "正常";
            } else if (params[0].data[1] === 10) {
              dsa = "拆除";
            } else if (params[0].data[1] === 11) {
              dsa = "拆除恢复";
            } else if (params[0].data[1] === 14) {
              dsa = "正常电压下模拟报警";
            } else if (params[0].data[1] === 15) {
              dsa = "低电压下模拟报警";
            } else {
              dsa = "正常";
            }
            return utils.timestampToTime(params[0].axisValue) + "<br>设备状态:" + dsa + "<br>点击查看原始数据";
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time',
        },
        yAxis: {
          min: 0,
          max: 16,
          type: 'value',
          minInterval: 1,
          axisLabel: {
            formatter: function(val) {
              if (val === 1) {
                return "报警";
              } else if (val === 2) {
                return "静音";
              } else if (val === 3) {
                return "蜂鸣器故障";
              } else if (val === 4) {
                return "低压";
              } else if (val === 5) {
                return "故障";
              } else if (val === 6) {
                return "数据异常";
              } else if (val === 7) {
                return "";
              } else if (val === 10) {
                return "拆除";
              } else if (val === 11) {
                return "拆除恢复";
              } else if (val === 14) {
                return "正常电压下模拟报警";
              } else if (val === 15) {
                return "低压下模拟报警";
              } else {
                return "";
              }
            }
          }
        },
        series: [
          {
            name: '设备状态',
            type: 'line',
            smooth: true,
            data: this.smoke_state_list,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "rgba(255, 173, 177, 0.0)"
                }
              }
            },
            markArea: {
              data: this.smoke_state_maparea_list
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    getAlarmValueInit() {
      var dom = document.getElementById("container_val");
      var myChart = echarts.init(dom);
      var option;

      option = {
        title: {
          text: '烟雾浓度'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>烟雾浓度:" + params[0].data[1] + "%";
          },
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 100,
          minInterval: 1,
          axisLabel: {
            formatter: function(val) {
              return val + "%";
            }
          }
        },
        series: [
          {
            name: '烟雾浓度',
            type: 'line',
            stack: '总量',
            axisLabel: {
              formatter: function(val) {
                return val + "%";
              }
            },
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
            data: this.smoke_value_list
          },
        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },
    getVolInit() {
      var dom = document.getElementById("container_vol");
      var myChart = echarts.init(dom);
      var option;

      option = {
        title: {
          text: '电池电量'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>电池电量:" + params[0].data[1] + "%";
          },
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 100,
          minInterval: 1,
          axisLabel: {
            formatter: function(val) {
              return val + "%";
            }
          }
        },
        series: [
          {
            name: '电池电量',
            type: 'line',
            stack: '总量',
            axisLabel: {
              formatter: function(val) {
                return val + "%";
              }
            },
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
            data: this.battery_value_list
          },
        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },
    getVolValInit() {
      var dom = document.getElementById("container_vol_val");
      var myChart = echarts.init(dom);
      var option;

      option = {
        title: {
          text: '电池电压'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>电池电压:" + params[0].data[1] + "V";
          },
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 2,
          max: 4,
          minInterval: 1,
          axisLabel: {
            formatter: function(val) {
              return val + "V";
            }
          }
        },
        series: [
          {
            name: '电池电压',
            type: 'line',
            stack: '总量',
            axisLabel: {
              formatter: function(val) {
                return val + "V";
              }
            },
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
            data: this.battery_voltage_list
          },
        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },
    getLoginData() {
      var dom = document.getElementById("container_login");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '登录日志'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            var val = params[0].data[1];
            var eve = "";
            if (val === 1) {
              eve = "设备登录";
            } else if (val === 2) {
              eve = "已处理";
            }
            return utils.timestampToTime(params[0].axisValue) + "<br>" + eve;
          },
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
        },
        yAxis: {
          min: 0,
          max: 2,
          minInterval: 1,
          axisLabel: {
            formatter: function(val) {
              if (val === 0) {
                return "";
              } else if (val === 1) {
                return "设备登录";
              } else {
                return "已处理";
              }
            }
          }
        },
        series: [
          {
            name: '设备登录',
            type: 'line',
            axisLabel: {
              formatter: function(val) {
                if (val === 0) {
                  return "";
                } else if (val === 1) {
                  return "设备登录";
                } else {
                  return "已处理";
                }
              }
            },
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
            data: this.login_error_list,
            markPoint: {
              data: this.login_error_marks
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    gotoSeeLoginLog () {
      this.dialogVisible = true;
      this.queryDeviceLoginErrorHistory();
    },
    dultWithAccess: debounce(async function() {
        try {
          await deviceDetailService.deltWithLoginErr(this.$route.query.deviceId);
          this.$message({
            message: '已处理',
            type: 'success'
          });
          this.isMultLogin = 0;
          this.dialogVisible = false; 
        } catch (error) {
          console.log(error);
        }
    }, 100),
    goSeeAnalysis () {
      this.dialogVisibleAnylysis = true;
    },
    nextAnalysis () {
      if (this.step === 0) {
        if (this.checkedProperties.length === 0) {
          this.$message.error('请勾选至少一项');
          return;
        }
        this.step = 1;
      } else if (this.step === 1) {
        if (this.value1 == null) {
          this.$message.error('请选择起止时间');
          return;
        }
        this.step ++;
        this.nextText = "完成";
        this.deepLoading = true;
        this.queryDeviceAnalysis();
      } else {
        this.deepLoading = false;
        this.handleClose();
      }
    },
    gotoseedata () {
      this.$router.push({ path: '/deviceData', query: { deviceId: this.$route.query.deviceId } });
    },
    goSeeAnalysisDeviceState () {
      var dom = document.getElementById("container-smoke-state");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '设备状态'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            var dsa = "";
            if (params[0].data[1] === 4) {
              dsa = "故障";
            } else if (params[0].data[1] === 3) {
              dsa = "火灾";
            } else if (params[0].data[1] === 2) {
              dsa = "拆除";
            } else if (params[0].data[1] === 1) {
              dsa = "低电压";
            } else {
              dsa = "正常";
            }
            return utils.timestampToTime(params[0].axisValue) + "<br>设备状态:" + dsa;
          },
        },
        legend: {
          data: ['设备故障'+'('+this.deepFaultList.length+')', '火灾告警'+'('+this.deepAlarmList.length+')', '拆除'+'('+this.deepDismantleList.length+')', '低电压'+'('+this.deepLowVoltageList.length+')']
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 4,
          minInterval: 1,
          type: 'value',
          axisLabel: {
            formatter: function(val) {
              if (val === 4) {
                return "设备故障";
              } else if (val === 3) {
                return "火灾告警";
              } else if (val === 2) {
                return "拆除";
              } else if (val === 1) {
                return "低电压";
              } else {
                return "正常";
              }
            }
          }
        },
        series: [
          {
            name: '设备故障'+'('+this.deepFaultList.length+')',
            type: 'line',
            data: this.deepFaultList,
          },
          {
            name: '火灾告警'+'('+this.deepAlarmList.length+')',
            type: 'line',
            data: this.deepAlarmList,
          },
          {
            name: '拆除'+'('+this.deepDismantleList.length+')',
            type: 'line',
            data: this.deepDismantleList,
          },
          {
            name: '低电压'+'('+this.deepLowVoltageList.length+')',
            type: 'line',
            data: this.deepLowVoltageList,
          },
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisHeartBeatState () {
      var dom = document.getElementById("container-heartbeat");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '心跳包'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>收到心跳包";
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          data: ['心跳包'+'('+this.deepHeartBeatList.length+')']
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 1,
          minInterval: 2,
          type: 'value',
          axisLabel: {
            formatter: function(val) {
              if (val === 1) {
                return "心跳包";
              } else {
                return "";
              }
            }
          }
        },
        series: [
          {
            name: '心跳包'+'('+this.deepHeartBeatList.length+')',
            type: 'line',
            data: this.deepHeartBeatList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisSmokeValueState () {
      var dom = document.getElementById("container-smoke-value");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '烟雾浓度'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>烟雾浓度:" + params[0].data[1] + "%";
          },
        },
        legend: {
          data: ['最小值:'+this.deepSmokeValueStatic.min+' 最大值:'+this.deepSmokeValueStatic.max+' 平均值:'+this.deepSmokeValueStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 100,
          minInterval: 1,
          type: 'value',
          axisLabel: {
            formatter: function(val) {
              return val + "%";
            }
          }
        },
        series: [
          {
            name: '最小值:'+this.deepSmokeValueStatic.min+' 最大值:'+this.deepSmokeValueStatic.max+' 平均值:'+this.deepSmokeValueStatic.avg,
            type: 'line',
            data: this.deepSmokeValueStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisBatteryValueState () {
      var dom = document.getElementById("container-battery-value");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '电池电量'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>电池电量:" + params[0].data[1] + "%";
          },
        },
        legend: {
          data: ['最小值:'+this.deepBatteryValueStatic.min+' 最大值:'+this.deepBatteryValueStatic.max+' 平均值:'+this.deepBatteryValueStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 100,
          minInterval: 1,
          type: 'value',
          axisLabel: {
            formatter: function(val) {
              return val + "%";
            }
          }
        },
        series: [
          {
            name: '最小值:'+this.deepBatteryValueStatic.min+' 最大值:'+this.deepBatteryValueStatic.max+' 平均值:'+this.deepBatteryValueStatic.avg,
            type: 'line',
            data: this.deepBatteryValueStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisBatteryVoltageState () {
      var dom = document.getElementById("container-battery-voltage");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '电池电压'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>电池电压:" + params[0].data[1] + "V";
          },
        },
        legend: {
          data: ['最小值:'+this.deepBatteryVoltageStatic.min+' 最大值:'+this.deepBatteryVoltageStatic.max+' 平均值:'+this.deepBatteryVoltageStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 2.5,
          max: 3.8,
          type: 'value',
          axisLabel: {
            formatter: function(val) {
              return val + "V";
            }
          }
        },
        series: [
          {
            name: '最小值:'+this.deepBatteryVoltageStatic.min+' 最大值:'+this.deepBatteryVoltageStatic.max+' 平均值:'+this.deepBatteryVoltageStatic.avg,
            type: 'line',
            data: this.deepBatteryVoltageStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisSnrState () {
      var dom = document.getElementById("container-snr");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '信噪比(snr)'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>snr:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepSnrStatic.min+' 最大值:'+this.deepSnrStatic.max+' 平均值:'+this.deepSnrStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepSnrStatic.min+' 最大值:'+this.deepSnrStatic.max+' 平均值:'+this.deepSnrStatic.avg,
            type: 'line',
            data: this.deepSnrStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisRsrpState () {
      var dom = document.getElementById("container-rsrp");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '参考信号接收功率(rsrp)'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>rsrp:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepRsrpStatic.min+' 最大值:'+this.deepRsrpStatic.max+' 平均值:'+this.deepRsrpStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepRsrpStatic.min+' 最大值:'+this.deepRsrpStatic.max+' 平均值:'+this.deepRsrpStatic.avg,
            type: 'line',
            data: this.deepRsrpStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisEclState () {
      var dom = document.getElementById("container-ecl");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '无线信号覆盖等级(ecl)'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>ecl:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepEclStatic.min+' 最大值:'+this.deepEclStatic.max+' 平均值:'+this.deepEclStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepEclStatic.min+' 最大值:'+this.deepEclStatic.max+' 平均值:'+this.deepEclStatic.avg,
            type: 'line',
            data: this.deepEclStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisSignalPowerState () {
      var dom = document.getElementById("container-signalPower");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '信号强度(signalPower)'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>signalPower:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepSignalPowerStatic.min+' 最大值:'+this.deepSignalPowerStatic.max+' 平均值:'+this.deepSignalPowerStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepSignalPowerStatic.min+' 最大值:'+this.deepSignalPowerStatic.max+' 平均值:'+this.deepSignalPowerStatic.avg,
            type: 'line',
            data: this.deepSignalPowerStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisTxPowerState () {
      var dom = document.getElementById("container-tx_Power");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '终端发射功率(tx_Power)'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>tx_Power:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepTxPowerStatic.min+' 最大值:'+this.deepTxPowerStatic.max+' 平均值:'+this.deepTxPowerStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepTxPowerStatic.min+' 最大值:'+this.deepTxPowerStatic.max+' 平均值:'+this.deepTxPowerStatic.avg,
            type: 'line',
            data: this.deepTxPowerStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisSinrState () {
      var dom = document.getElementById("container-sinr");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '信号与干扰加噪声比(sinr)'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>sinr:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepSinrStatic.min+' 最大值:'+this.deepSinrStatic.max+' 平均值:'+this.deepSinrStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepSinrStatic.min+' 最大值:'+this.deepSinrStatic.max+' 平均值:'+this.deepSinrStatic.avg,
            type: 'line',
            data: this.deepSinrStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisTempState () {
      var dom = document.getElementById("container-temp");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '温度(°c)'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>温度:" + params[0].data[1] + "°c";
          },
        },
        legend: {
          data: ['最小值:'+this.deepTempStatic.min+' 最大值:'+this.deepTempStatic.max+' 平均值:'+this.deepTempStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepTempStatic.min+' 最大值:'+this.deepTempStatic.max+' 平均值:'+this.deepTempStatic.avg,
            type: 'line',
            data: this.deepTempStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisCsqState () {
      var dom = document.getElementById("container-csq");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: 'CSQ'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>CSQ:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepCSQStatic.min+' 最大值:'+this.deepCSQStatic.max+' 平均值:'+this.deepCSQStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepCSQStatic.min+' 最大值:'+this.deepCSQStatic.max+' 平均值:'+this.deepCSQStatic.avg,
            type: 'line',
            data: this.deepCSQStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisPciState () {
      var dom = document.getElementById("container-pci");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: 'PCI'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>PCI:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepPCIStatic.min+' 最大值:'+this.deepPCIStatic.max+' 平均值:'+this.deepPCIStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepPCIStatic.min+' 最大值:'+this.deepPCIStatic.max+' 平均值:'+this.deepPCIStatic.avg,
            type: 'line',
            data: this.deepPCIStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisRsrqState () {
      var dom = document.getElementById("container-rsrq");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: 'RSRQ'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>RSRQ:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepRSRQStatic.min+' 最大值:'+this.deepRSRQStatic.max+' 平均值:'+this.deepRSRQStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepRSRQStatic.min+' 最大值:'+this.deepRSRQStatic.max+' 平均值:'+this.deepRSRQStatic.avg,
            type: 'line',
            data: this.deepRSRQStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisEarfcnState () {
      var dom = document.getElementById("container-earfcn");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '频点(EARFCN)'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>频点(EARFCN):" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepEARFCNStatic.min+' 最大值:'+this.deepEARFCNStatic.max+' 平均值:'+this.deepEARFCNStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepEARFCNStatic.min+' 最大值:'+this.deepEARFCNStatic.max+' 平均值:'+this.deepEARFCNStatic.avg,
            type: 'line',
            data: this.deepEARFCNStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisTacState () {
      var dom = document.getElementById("container-tac");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: 'TAC'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>TAC:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepTACStatic.min+' 最大值:'+this.deepTACStatic.max+' 平均值:'+this.deepTACStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepTACStatic.min+' 最大值:'+this.deepTACStatic.max+' 平均值:'+this.deepTACStatic.avg,
            type: 'line',
            data: this.deepTACStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    handleClose () {
      this.deepLoading = false;
      this.step = 0;
      this.nextText = "下一步";
      this.checkAll = false;
      this.checkedProperties = [];
      this.isIndeterminate = false;
      this.dialogVisibleAnylysis = false;
    },
    handleCheckAllChange(val) {
      this.checkedProperties = val ? this.properties : [];
      this.isIndeterminate = false;
    },
    handleCheckedPropertiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.properties.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.properties.length;
    },
    openHeartTime () {
      this.dialogVisibleHeartTime = true;
    },
    openHeartDetail () {
      this.heartDetailVisible = true;
    },
    async deleteDevice() {
      try {
        await this.$confirm('是否确认注销此设备?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
        await deviceService.deleteDevice(this.$route.query.deviceId);
        
        this.$message.success('注销成功！此设备已处于注销状态。。');
      } catch (e) {
        console.error(e);
      }
    },
  }
  // mounted () {
  //   this.$nextTick(function () {
  //     this.getAlarmStateInit();
  //     this.getAlarmValueInit();
  //     this.getVolInit();
  //     this.getVolValInit();
  //   })
  // }
};
</script>
<style lang="scss">
@import "@/styles/variables.scss";
  .el-button.back {
    margin-bottom: 20px;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #f8f8f8;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    text-align: center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

.left {
  width: 25%;
  float: left;
}

.right {
  width: 75%;
  float: left;
}

  .cardWrap_3kz2Pfee82 {
    padding: 0 6px 0 0;
    width: 33.33%;
    min-width: 215px;
    float: left;
}

.cardWrap_3kz2Pfee82_left {
    padding: 0 6px 0 0;
    width: 100%;
    min-width: 215px;
    float: left;
}

.active2_3XAZDfee82, .active_gm8Z5fee82 {
    border-radius: 4px;
    background: #fafafa;
}

.content2_3IACpfee82, .content_2CgxXfee82 {
    color: #666;
    padding: 16px;
    height: 82px;
    border-radius: 4px;
    margin-bottom: 12px;
    background: #f8f8f8;
}

.content_2CgxXfee82 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.txt-value {
    display: flex;
    align-items: center;
}

.txt-value_2a4nTfee82 {
    display: flex;
    align-items: center;
    margin-bottom: 11px;
}

.txt-value_2a4nTfee82.alert span {
  color: $danger-color;
}
.txt-value_2a4nTfee82.fault span {
  color: $warning-color;
}

.num_2ceN2fee82 {
    color: #4a4a4a;
    font-size: 20px;
    font-weight: 700;
    margin-right: 8px;
    max-width: 100%;
    display: inline-block;
    overflow-wrap: break-word;    /*  css3属性，当内容超过指定容器的边界时是否断行  */
    text-align: left;
}

.num_2ceN2fee82.unit {
    color: #4a4a4a;
    font-size: 14px;
    font-weight: 100;
    margin-right: 8px;
}


.txt_raRWufee82 {
    font-size: 13px;
    opacity: .8;
    margin-bottom: 10px;
}

.txt_raRWufee82.alert {
  color: $danger-color;
}
.txt_raRWufee82.fault {
  color: $warning-color;
}

.report-time {
  font-size: 12px;
}

.report-time.alert span{
  color: $danger-color;
}


*, :after, :before {
    box-sizing: border-box;
}
.iconWrap_3mA74fee82 {
    width: 32px;
    height: 32px;
    border-radius: 50% 50%;
    text-align: center;
    line-height: 32px;
    background-color:rgba(5,130,255,0.1);
}

.iconWrap_3mA74fee82.alert {
  background-color:rgba(228,111,74,0.1);
}

.iconWrap_3mA74fee82.fault {
  background-color:rgba(228,111,74,0.1);
}

.culri {
  height: 400px;width:50%;float:left;
}

.culri.all {
  height: 400px;width:100%;float:left;
}

.el-carousel__indicators--vertical {
  display: none;
}

.medium {
  line-height: 40px;
}
.happen-img {
  float: left;
}
.happen-img img{
  width: 30px;
  height: 30px;
  margin-top: 2px;
}

p.happen-status{
  float: left;
   margin-left: 10px;
}

.happen-status.alert {
  color: $danger-color;
}
.happen-status.fault {
  color: $warning-color;
}

.online-status {
  float: right;
  line-height: 36px;
  margin-right: 32px;
}

.step1-item {
  padding: 10px;
}
.item-chart {
  width:50%;
  height:350px;
  float:left;
}
.heart_hint {
  padding: 10px;
}

.product_Id {
    float: left;
    line-height: 36px;
    margin-left: 32px;
}
</style>